<template>
  <view class="personal-center">
    <!-- 个人信息区域 -->
    <view class="user-info tn-main-gradient-orangeyellow">
      <view class="avatar-container">
        <view class="avatar" :style="{
          width: '50px',
          height: '50px',
          borderRadius: '50%',
          backgroundColor: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: '0 2rpx 8rpx rgba(0,0,0,0.1)'
        }">
          <text class="t-icon t-icon-zhuye_wodebaobei" style="
            width: 30px;
            height: 30px;
            color: #ff9f00;
          "></text>
        </view>
      </view>
      <view class="user-details">
        <text class="account tn-text-bold tn-text-xl" style="
          color: #333;
          margin-bottom: 4px;
        ">{{userInfo.name}}</text>
        <text class="sex tn-margin-left-sm tn-padding-xs tn-round tn-text-sm" 
              :style="{
                backgroundColor: userInfo.sex == 1 ? '#ff7f7f' : '#7fbfff',
                color: '#fff',
                padding: '6rpx 16rpx',
                borderRadius: '20rpx',
                fontWeight: '500',
                boxShadow: '0 2rpx 4rpx rgba(0,0,0,0.1)',
                fontSize: '12px',
                lineHeight: '1.2'
              }">{{userInfo.sex == 1 ? '女宝' : '男宝'}}</text>
      </view>
      <!-- <view class="arrow"></view> -->
    </view>
    <!-- 功能列表区域 -->
    <view class="function-list">
       <view class="function-item" @tap="navigateToChildProfile">
        <text class="item-text">宝宝资料</text>
        <view class="arrow tn-color-grey tn-icon-right"></view>
      </view>
      <view class="function-item" @tap="navigateToaccount">
        <text class="item-text">账户与安全</text>
        <view class="arrow tn-color-grey tn-icon-right"></view>
      </view>
      <view class="function-item" @tap="navigateToFamily">
        <text class="item-text">家人</text>
        <view class="arrow tn-color-grey tn-icon-right"></view>
      </view> 
      <!-- 可按需添加更多功能项 -->
    </view>
    <!-- 底部退出登录按钮 -->
    <button @tap="handleLogout" class="logout-btn">退出登录</button>

  </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      userToken: uni.getStorageSync('USER_TOKEN')
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    handleLogout() {
      uni.removeStorageSync('USER_TOKEN')
      uni.removeStorageSync('USER_INFO')
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    navigateToFamily() {
      uni.navigateTo({
        url: '/pages/family/family'
      });
    },
    navigateToaccount() {
      uni.navigateTo({
        url: '/pages/my/accountSecurity'
      });
    },
    navigateToChildProfile() {
      uni.navigateTo({
        url: '/pages/my/childProfile'
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.personal-center {
  background-color: #f5f5f5;
  height: 100vh;
}

.user-info {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30px;
  border-bottom: 1px solid #eee;
}

.avatar-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.avatar {
  font-size: 24px;
  color: #666;
}

.user-details {
  flex: 1;
  display: flex;
  align-items: center;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
}

.account {
  font-size: 14px;
  color: #999;
}


.function-list {
  margin-top: 15px;
  background-color: #fff;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.item-text {
  flex: 1;
  font-size: 16px;
}

.logout-btn {
  margin: 30px 20px;
  background-color: #fff;
  color: #e64340;
  border: 1px solid #e64340;
  padding: 10px;
  border-radius: 5px;
}

.popup-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.popup-footer button {
  margin-left: 10px;
}
</style>